<template>
    <div class="main-container">
        <div class="flex justify-between items-center mg-bottom-[10px]">
            <span class="font-[16px]">文章列表</span>
            <a-button type="primary">发布文档</a-button>
        </div>
        <div class="table-search">
            <a-form layout="inline" ref="searchFormRef" :model="searchTable.searchParam">
                <a-form-item label="标题" name="title">
                    <a-input class="search-input" v-model:value="searchTable.searchParam.title" placeholder="请输入标题" />
                </a-form-item>
                <a-form-item label="分类" name="category_id">
                    <a-select class="search-select" v-model:value="searchTable.searchParam.category_id"
                        placeholder="请选择分类">
                        <a-select-option value="">全部</a-select-option>
                        <a-select-option value="1">Zone two</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" html-type="submit">
                        搜索
                    </a-button>
                    <a-button class="mg-left-[10px]" @click="resetForm">重置</a-button>
                </a-form-item>
            </a-form>
        </div>
        <div>
            <a-table :columns="columns" :data-source="searchTable.data" :pagination="pagination"
                :loading="searchTable.loading" @change="handleTableChange">
                <template #bodyCell="{ column, text }">
                    <template v-if="column.dataIndex === 'name'">{{ text.first }} {{ text.last }}</template>
                </template>
            </a-table>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue';
import * as Api from '@/utils/api/article';

const searchFormRef = ref();

const resetForm = () => {
    searchFormRef.value.resetFields();
};

const searchTable = reactive({
    page: 1,
    limit: 10,
    total: 0,
    loading: false,
    data: [],
    searchParam: {
        title: '',
        category_id: '',
    }
})

// 列表分页数据
const pagination = computed(() => ({
    total: searchTable.total,
    current: searchTable.page,
    pageSize: searchTable.limit,
}));

const columns = [
    {
        title: '序号',
        dataIndex: 'article_id',
        key: 'article_id',
        sorter: true,
        width: '10%',
    },
    {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        width: '25%',
    },
    {
        title: '分类',
        dataIndex: 'category_id',
        key: 'category_id',
        width: '10%',
    },
    {
        title: '排序',
        dataIndex: 'sort',
        key: 'sort',
        width: '10%',
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: '10%',
    },
    {
        title: '发布时间',
        dataIndex: 'created_at',
        key: 'created_at',
        sorter: true,
        width: '15%',
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: '20%',
    },
];

const handleTableChange = (pag: { pageSize: number; current: number }, filters: any, sorter: any) => {
    console.log(pag)
    console.log(filters)
    console.log(sorter)
};

onMounted(() => {
    initData();
});

// 初始化数据
const initData = () => {
    Api.getArticleList(searchTable.searchParam).then((res: any) => {
        console.log(res)
    }).catch(() => {
        searchTable.loading = false;
    })
};

</script>